import { createRoute, Stack } from '@granite-js/react-native';
import { StyleSheet, Text, View } from 'react-native';
import * as z from 'zod';
import * as v from 'valibot';

export const Route = createRoute('/', {
  component: Page,
});

function Page() {
  // zod: only accept a nonempty string
  const zodSchema = z.object({
    name: z.string().min(1, 'Please enter a name!'),
  });

  // Test zod invalid
  const zodInvalid = zodSchema.safeParse({ name: '' });
  // Test zod valid
  const zodValid = zodSchema.safeParse({ name: 'John Doe' });

  const valibotInvalid = v.safeParse(
    v.object({
      name: v.pipe(v.string(), v.minLength(1, 'Please enter a name!')),
    }),
    { name: '' }
  );
  const valibotValid = v.safeParse(
    v.object({
      name: v.pipe(v.string(), v.minLength(1, 'Please enter a name!')),
    }),
    { name: 'John Doe' }
  );

  return (
    <Stack.Vertical style={styles.container} gutter={16}>
      <Text style={styles.title}>zod & valibot Validation Demo</Text>
      <Text style={styles.subtitle}>All tests run automatically</Text>

      <Text style={styles.schemaSectionTitle}>zod schema</Text>
      <View style={styles.schemaBox}>
        <Text style={styles.schemaCode}>{`z.object({\n  name: z.string().min(1, 'Please enter a name!'),\n})`}</Text>
      </View>

      <Text style={styles.sectionTitle}>zod results</Text>
      <Text style={zodInvalid.success ? styles.resultSuccess : styles.resultError}>
        zod (empty): {zodInvalid.success ? 'pass' : `fail - ${zodInvalid.error.issues[0]?.message ?? 'error'}`}
      </Text>
      <Text style={zodValid.success ? styles.resultSuccess : styles.resultError}>
        zod ('John Doe'): {zodValid.success ? 'pass' : `fail - ${zodValid.error.issues[0]?.message ?? 'error'}`}
      </Text>

      <Text style={styles.schemaSectionTitle}>valibot schema</Text>
      <View style={styles.schemaBox}>
        <Text style={styles.schemaCode}>
          {`v.object({\n  name: v.pipe(v.string(), v.minLength(1, 'Please enter a name!')),\n})`}
        </Text>
      </View>

      <Text style={styles.sectionTitle}>valibot results</Text>
      <Text style={valibotInvalid.success ? styles.resultSuccess : styles.resultError}>
        valibot (empty): {valibotInvalid.success ? 'pass' : `fail - ${valibotInvalid.issues[0]?.message ?? 'error'}`}
      </Text>
      <Text style={valibotValid.success ? styles.resultSuccess : styles.resultError}>
        valibot ('John Doe'): {valibotValid.success ? 'pass' : `fail - ${valibotValid.issues[0]?.message ?? 'error'}`}
      </Text>
    </Stack.Vertical>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#1A202C',
    textAlign: 'center',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#718096',
    marginBottom: 24,
    textAlign: 'center',
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    marginTop: 20,
    marginBottom: 4,
    color: '#353F53',
  },
  schemaSectionTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#718096',
    marginTop: 18,
    marginBottom: 2,
    alignSelf: 'flex-start',
  },
  schemaBox: {
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    padding: 10,
    marginBottom: 8,
    alignSelf: 'stretch',
  },
  schemaCode: {
    fontFamily: 'monospace',
    color: '#353F53',
    fontSize: 13,
  },
  resultSuccess: {
    color: '#3182ce',
    marginTop: 4,
    fontSize: 16,
  },
  resultError: {
    color: '#E53E3E',
    marginTop: 4,
    fontSize: 16,
  },
});